import React, { Component } from 'react';

import GridSty from './GridStyled'
import one from '@a/images/1.jpg'
import two from '@a/images/2.jpg'
import three from '@a/images/3.jpg'
import four from '@a/images/4.jpg'
import five from '@a/images/5.jpg'
import six from '@a/images/6.jpg'
import seven from '@a/images/7.jpg'
import eight from '@a/images/8.jpg'

export default class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date:[{name:'通知',id:one},{name:'课堂评价',id:two},{name:'打卡活动',id:three},{name:'班级相册',id:four},{name:'备课',id:five},{name:'教学拓展',id:six},{name:'讨论组',id:seven},{name:'调查',id:eight}],
    };
  }

  render() {
    return (
      <GridSty>
      <ul> 
        {
          this.state.date.map(value =>(
            <li
            key={value.id}
            >
              <div>
                <img src={`${value.id}`} alt=""/>
              </div>
              <p>{`${value.name}`}</p>
            </li>
          ))
        }
      </ul>
      </GridSty>
    );
  }
}
